<template>
  <div id="app">
    <div class="top" style="display: flex; align-items: center;">
      <img src="./assets/images/logo.png" alt="" style="padding-left: 15px;">
      <el-row>
        <!-- 最顶部的欢迎信息和登录注册按钮-->
        <el-col :span="24" style="display: flex; justify-content: right;">

          <span style="font-size: 30px;" class="title">美丽乡村旅游网</span>
          <img :src="circleUrl" alt=""
            style="width: 40px;height: 40px;margin-right: 10px;border-radius: 100px;object-fit: cover; ">
          <!-- <el-avatar size="large" :src="circleUrl" fit="fill"></el-avatar> -->
          <el-button round size="mini" v-if="!isLogin" type="success" style=" color: #fff;"
            @click="login">个人登录</el-button>
          <el-button round size="mini" v-if="isLogin" type="success" style=" color: #fff;"
            @click="login">切换账号</el-button>
          <el-button round size="mini" v-if="isLogin" type="success" style=" color: #fff;"
            @click="loginOut">退出登录</el-button>
          <el-button round size="mini" type="success" style=" color: #fff;" @click="register">免费注册</el-button>

          <el-select v-model="inputData" filterable remote reserve-keyword placeholder="请输入关键词"
            style="margin-left: 10px;" @change="handleSelectChange" clearable :remote-method="remoteMethod"
            :loading="loading">
            <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.searchVO">
            </el-option>
          </el-select>
          <el-button type="success" @click="goSearchResult()">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- 顶部搜索框和图片信息-->
    <el-row>
      <!-- 图片-->
      <!-- <el-col :span="5">
      </el-col> -->
      <!-- 搜索框-->

    </el-row>

    <!-- 导航菜单-->
    <el-container>
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
          active-text-color="#67C23A" router>
          <el-menu-item index="/homepage">首页</el-menu-item>
          <el-menu-item index="/car">火车票 </el-menu-item>
          <el-menu-item index="/route">旅游路线</el-menu-item>
          <el-menu-item index="/hotel">住宿</el-menu-item>
          <el-menu-item index="/scenic">景区</el-menu-item>
          <el-menu-item index="/insurance">保险</el-menu-item>

          <el-submenu index="78008">
            <template slot="title">旅游攻略</template>
            <el-menu-item index="/strategy">攻略</el-menu-item>
            <el-menu-item index="/myStrategy">我的攻略</el-menu-item>
          </el-submenu>

          <el-submenu index="788">
            <template slot="title">个人信息</template>
            <el-menu-item index="/myInfo">我的资料</el-menu-item>
            <el-menu-item index="/myOrder">我的订单</el-menu-item>
            <el-menu-item index="/myInsurance">我的保险</el-menu-item>
            <el-menu-item index="/updatePassword">修改密码</el-menu-item>
          </el-submenu>
          <el-menu-item index="/message">去留言</el-menu-item>
          <el-menu-item index="/notic">公告</el-menu-item>
          <el-menu-item index="/myCollect">我的收藏</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
          <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import newAxios from "./utils/axios";
export default {
  name: "App",
  data() {
    return {
      activeIndex: "/homepage",
      // activeIndex: "/scenery",
      // activeIndex: "/domestic",
      // activeIndex: "/foreign",
      // activeIndex: "/hotel",

      url: "https://i.postimg.cc/J7KjNt96/title.png",
      content: "",
      select: "",
      myInfo: {},
      isLogin: false,
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      options: [],
      value: {},
      list: [],
      loading: false,
      inputData: ""
    };
  },
  created() {
    console.log('当前路由：',this.$route.path);
    this.activeIndex = this.$route.path;
    this.getUser();
    this.$router.afterEach((to, from) => {
      if (to.path == '/loginUser') {
        //    // 调用刷新方法
        //  location.reload();
        window.sessionStorage.clear();
        this.isLogin = false;
        this.circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
      }
    });
  },
  methods: {
    goSearchResult() {
      console.log("。。。：" + this.inputData);
      if (this.inputData != "") {
        this.$router.push({
          path: "/searchResult",
          query: {
            keyWord: this.inputData,
          },
        });
        location.reload();
      } else {
        this.$message({
          message: '请输入搜索关键词',
          type: 'warning'
        })
      }
    },
    remoteMethod(query) {
      if (query !="") {
        this.inputData = query;
        this.loading = true;
        console.log("搜索:" + query);
        newAxios
          .post("/search/all", {
            searchContent: query
          })
          .then((res) => res.data)
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              // console.log(res.data);
              this.options = res.data
              this.loading = false;
            } else {
              // this.$message.error("请先登陆！");
              this.loading = false;
            }
          });
      }
      else {
        this.options = [];
      }
    },
    handleSelectChange(value) {
      console.log(value);
      this.inputData = value.title;
      if (value.typeId == 0) {
        this.$message.success("车票")
        this.$router.push({
          path: "/carDetail",
          query: {
            car_id: value.id,
          },
        });
        location.reload();
      } else if (value.typeId == 1) {
        // this.$message.success("路线")
        this.$router.push({
          path: "/routeDetail",
          query: {
            routeId: value.id,
          },
        });
        location.reload();
      } else if (value.typeId == 2) {
        // this.$message.success("住宿");
        this.$router.push({
          path: "/hotel_detail",
          query: {
            scenicSpotId: value.scenicSpotId,
            hotelid: value.id,
          },
        });
        location.reload();
      } else if (value.typeId == 3) {
        // this.$message.success("景区");
        this.$router.push({
          path: "/scenicDetail",
          query: {
            spotId: value.id,
          },
        });
        location.reload();
      } else if (value.typeId == 4) {
        // this.$message.success("保险");
        this.$router.push({
          path: "/insuranceDetail",
          query: {
            insuranceId: value.id,
          },
        });
        location.reload();
      } else if (value.typeId == 5) {
        // this.$message.success("攻略");
        this.$router.push({
          path: "/strategyDetail",
          query: {
            strategyId: value.id,
          },
        });
        location.reload();
      }
    },
    getUser() {
      newAxios
        .get("/admin/findUserById")
        .then((res) => res.data)
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data);
            this.myInfo = res.data;
            if (Object.keys(this.myInfo).length === 0) {
              console.log("myInfo is 空");
            } else {
              console.log("myInfo is 不空");
              this.isLogin = true;
              this.circleUrl = this.myInfo.icon;
            }
          } else {
            // this.$message.error("用户未登陆！")
          }
        })
        .catch((err) => {
          this.$message = "正在加载ing...有事请留言";
        });
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },
    login() {
      console.log("用户跳转至登录页面");
      this.$router.push({ path: "/loginUser" });
    },
    loginOut() {
      console.log("退出登录");
      window.sessionStorage.clear();
      this.isLogin = false;
      this.circleUrl = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
      this.$router.push("/loginUser");
    },
    register() {
      console.log("用户跳转至注册页面");
      this.$router.push({ path: "/register" });
    },
    insurance() {
      this.$router.push({ path: "/scenic" });
    },
  },
};
</script>

<style>
#app {
  width: 1080px;
  text-align: center;
  margin: 0 auto;
  margin-top: 20px;
}

#app .top img {
  width: 90px;
  height: 90px;
}

#app .top .title {
  margin-right: 10px;
  font-family: 'STXinwei';
  line-height: 28px;
  padding-top: 5px;
  color: #67C23A;
}
</style>
